<template>
	<view class="admin">
		<cu-custom bgColor="bg-gradual-purple" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">后台管理</block>
		</cu-custom>
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class='action'>
				<text class='cuIcon-titles text-orange'></text>
				全局配置
			</view>
		</view>
		<view class="cu-list menu shadow-lg">
			<view class="cu-item arrow">
				<view class='content' @tap='showFormModal'>
					<text class='cuIcon-cascades text-grey'></text>
					<text class='text-grey'>管理员FormId</text>
				</view>
				<view class='action'>
					<text class='text-grey text-sm'>可用数量:{{formIdCount}}</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class='content' @tap='showSubscribe'>
					<text class='cuIcon-cascades text-grey'></text>
					<text class='text-grey'>订阅消息列表</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class='content' @tap=''>
					<text class='cuIcon-messagefill text-grey'></text>
					<text class='text-grey'>系统日志</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class='content' @tap='showReleaseModal'>
					<text class='cuIcon-formfill text-grey'></text>
					<text class='text-grey'>版本发布</text>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class='action'>
				<text class='cuIcon-titles text-orange '></text>
				博客管理
			</view>
		</view>
		<view class="cu-list menu shadow-lg">
			<view class="cu-item arrow">
				<view class='content' @tap='showComment'>
					<text class='cuIcon-comment text-grey'></text>
					<text class='text-grey'>评论管理</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class='content' @tap='showArticle'>
					<text class='cuIcon-post text-grey'></text>
					<text class='text-grey'>文章管理</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class='content' @tap='showClassify'>
					<text class='cuIcon-form text-grey'></text>
					<text class='text-grey'>专题管理</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class='content' @tap='showLabel'>
					<text class='cuIcon-tagfill text-grey'></text>
					<text class='text-grey'>标签管理</text>
				</view>
			</view>
		</view>
		<!-- formId设置窗口 -->
		<view class="cu-modal" :class="isShow ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class='content'>生成FormId</view>
					<view class='action' @tap='hideFormModal'>
						<text class='cuIcon-close text-red'></text>
					</view>
				</view>
				<view class='padding-xl'>
					<view v-for="(item,idx) in formIds" :key="idx">
						<view>{{item}}</view>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class='action'>
						<form @submit="formSubmit" report-submit="true">
							<button form-type="submit" class='cu-btn line-green text-green'>
								生成FormId
							</button>
						</form>
						<button class='cu-btn bg-green margin-left' @tap='saveFormIds'>批量保存</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 版本发布窗口 -->
		<view class="cu-modal" :class="isReleaseShow ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class='content'>版本发布</view>
					<view class='action' @tap='hideReleaseModal'>
						<text class='cuIcon-close text-red'></text>
					</view>
				</view>
				<form @submit="formRelaeaseSubmit">
					<view class='padding-sm'>
						<view class="cu-form-group text-left">
							<view class='title'>版本:</view>
							<input placeholder="请填写版本" class='radius' name='releaseName'
								v-model='release.releaseName'></input>
						</view>
						<view class="cu-form-group text-left">
							<view class='title'>日期:</view>
							<input placeholder="请填写日期" class='radius' name='releaseDate'
								:value='release.releaseDate'></input>
						</view>
						<view v-if="isReleaseShow" class="cu-form-group text-left">
							<textarea placeholder="请输入迭代内容" maxlength="-1" name='releaseContent'
								:value='release.releaseContent' placeholder-class='placeholder'></textarea>
						</view>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class='action'>
							<button class='cu-btn' @tap='hideReleaseModal'>取消</button>
							<button form-type="submit" class='cu-btn margin-left bg-green'>保存</button>
						</view>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../utils/util.js';
	import api from '../../utils/api.js';
	export default {
		data() {
			return {
				isShow: false,
				formIds: [],
				formIdCount: 0,
				isReleaseShow: false,
				release: {
					releaseName: '',
					releaseDate: util(new Date().getTime(), 2),
					releaseContent: ''
				}
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: async function(options) {
			let res = await api.queryFormIds();
			this.formIdCount = res.result.formIds;
		},
		methods: {
			/**
			 * 隐藏
			 * @param {*} e 
			 */
			hideFormModal(e) {
				this.isShow = false;
			},
			/**
			 * 隐藏
			 * @param {*} e 
			 */
			hideReleaseModal(e) {
				this.isReleaseShow = false;
			},
			/**
			 * 显示
			 * @param {} e 
			 */
			showFormModal(e) {
				this.isShow = true
			},
			/**
			 * 显示
			 * @param {} e 
			 */
			showReleaseModal(e) {
				this.isReleaseShow = true
			},
			/**
			 * 生成formId
			 * @param {*} e 
			 */
			formSubmit: function(e) {
				let that = this;
				console.info(e.detail.formId);
				if (that.formIds.length > 10) {
					uni.showToast({
						title: '超过生成上限啦',
						icon: 'none',
						image: '',
						duration: 1500
					});
					return;
				}
				if (e.detail != undefined && e.detail.formId != undefined && e.detail.formId !=
					"the formId is a mock one") {
					that.formIds = that.formIds.concat(e.detail.formId);
					console.info(that.formIds);
				}
			},
			/**
			 * 批量保存formIds
			 * @param {} e 
			 */
			saveFormIds: async function(e) {
				let that = this;
				if (that.formIds.length === 0) {
					return;
				}

				uni.showLoading({
					title: '保存中...',
				})
				let res = await api.addFormIds(that.formIds);
				console.info(res);
				if (res.result) {
					that.formIds = [];
					that.isShow = false;

					uni.showToast({
						title: '保存完成',
						icon: 'none',
						duration: 1500
					})
				} else {
					uni.showToast({
						title: '保存出现异常',
						icon: 'none',
						duration: 1500
					})
				}
				uni.hideLoading()
			},
			/**
			 * 保存发布版本
			 * @param {*} e 
			 */
			formRelaeaseSubmit: async function(e) {
				let that = this;
				let releaseName = e.detail.value.releaseName;
				let releaseDate = e.detail.value.releaseDate;
				let releaseContent = e.detail.value.releaseContent;
				if (releaseName === undefined ||
					releaseName === "" ||
					releaseDate === undefined ||
					releaseDate === "" ||
					releaseContent === undefined ||
					releaseContent === "") {
					uni.showToast({
						title: '请填写正确的表单信息',
						icon: 'none',
						duration: 1500
					})
				} else {
					uni.showLoading({
						title: '保存中...',
					})

					let log = {
						releaseName: releaseName,
						releaseDate: releaseDate,
						releaseContent: releaseContent.split("\n")
					}

					let title = '小程序更新啦，赶紧来看看吧';

					let res = await api.addReleaseLog(log, title);
					uni.hideLoading();
					console.info(res)
					if (res.result) {
						that.isReleaseShow = false;
						that.release = {
							releaseName: '',
							releaseDate: util(new Date().getTime(), 2),
							releaseContent: ''
						}

						uni.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 1500
						})
					} else {
						uni.showToast({
							title: '保存出错，请查看云函数日志',
							icon: 'none',
							duration: 1500
						})
					}
				}
			},

			showSubscribe: async function(e) {
				uni.navigateTo({
					url: '../admin/subscribes'
				})
			},

			/**
			 * 跳转到评论列表
			 * @param {*} e 
			 */
			showComment: async function(e) {
				uni.navigateTo({
					url: '../admin/comment'
				})
			},
			/**
			 * 跳转文章编辑
			 * @param {*} e 
			 */
			showArticle: async function(e) {
				uni.navigateTo({
					url: '../admin/articleList'
				})
			},
			/**
			 * 跳转到专题列表
			 * @param {*} e 
			 */
			showClassify: async function(e) {
				uni.navigateTo({
					url: '../admin/classify'
				})
			},
			/**
			 * 跳转标签列表
			 * @param {*} e 
			 */
			showLabel: async function(e) {
				uni.navigateTo({
					url: '../admin/labelList'
				})
			}
		}
	}
</script>

<style>
</style>
